<template>
 <yh-dialog drag title=" " :close-on-click-modal="false" :before-close="closeDialog" :visible.sync="stockCodeDialog" width="600px">
    <div>
      <el-form label-width="100px" :model="queryForm" ref="queryStockForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="证券代码:" prop="stockCode">
              <el-input v-model="queryForm.stockCode" placeholder="" clearable size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证券名称:" prop="stockNameSt">
              <el-input v-model="queryForm.stockNameSt" placeholder="" clearable size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 5px">
          <el-col :span="12">
            <el-form-item label="证券类型:" prop="stockType">
              <el-select v-model="queryForm.stockType" placeholder="" :disabled="disabled" size="mini" filterable>
                <el-option v-for="(sLabel, sKey) in StockTypeSelectPojo" :label="`${sKey} ${sLabel}`" :value="sKey" :key="sKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="市场类型" prop="marketCode">
              <el-select v-model="queryForm.marketCode" placeholder="" :disabled="disabled" size="mini" filterable>
                <el-option v-for="(mLabel, mKey) in MarketTypeSelectPojo" :label="`${mKey} ${mLabel}`" :value="mKey" :key="mKey" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="margin-top: 5px; text-align: right">
        <el-button size="mini" @click="resetForm">重 置</el-button>
        <el-button size="mini" type="primary" @click="getStockList(1)">搜 索</el-button>
      </div>
      <el-table
        :data="stockTable"
        v-table-top="pageVO.currentPage"
        @row-dblclick="stockSearchSubmit"
        v-loading="stockSearchLoading"
        style="width: 100%"
        height="250px"
        size="mini"
        border
      >
        <el-table-column prop="stockCode" label="证券代码" width="120" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="stockNameSt" label="证券名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="stockType" label="证券类型" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ StockTypePojo[scope.row.stockType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="marketCode" label="市场类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ MarketTypePojo[scope.row.marketCode] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="getStockList"
          layout="total, prev, pager, next"
          :current-page="pageVO.currentPage"
          :page-size="pageVO.pageSize"
          :total="pageVO.total"
        >
        </el-pagination>
      </div>
    </div>
 </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';

export interface pages {
  total?: number;
  pageSize?: number;
  currentPage?: number;
}
@Component({
  name: 'SearchStock',
})
export default class SearchStock extends Vue {
  @Prop()
  stockCodeDialog: boolean;
  stockTable: any[] = [];

  @Prop()
  disabled: boolean;

  @Prop()
  queryStockForm: any;

  // 证券查询表单
  queryForm: any = {};

  private pageVO: pages = {
    total: 0,
    pageSize: 25,
    currentPage: 1,
  };

  private stockSearchLoading = false;
  private DictionConstUtil = DictionConstUtil;

  private StockTypeSelectData: any[] = [];
  private MarketTypeSelectData: any[] = [];

  private StockTypePojo: any = {};
  private MarketTypePojo: any = {};

  private StockTypeSelectPojo: any = {};
  private MarketTypeSelectPojo: any = {};

  async mounted() {
    this.MarketTypeSelectData = await DictionConstUtil.FNMarketType();
    this.StockTypeSelectData = await DictionConstUtil.FNStockType();
    this.MarketTypePojo = DictionConstUtil.ListToPojo(this.MarketTypeSelectData);
    this.StockTypePojo = DictionConstUtil.ListToPojo(this.StockTypeSelectData);
    this.getStock();
  }

  @Watch('queryStockForm', { immediate: true, deep: true })
  private async getStock() {
    this.queryForm = JSON.parse(JSON.stringify(this.queryStockForm));
    let MarketTypeSelectData = [];
    let StockTypeSelectData = [];

    if (this.queryForm.multMarketCode.length) {
      MarketTypeSelectData = this.MarketTypeSelectData.filter((item) => this.queryForm.multMarketCode.includes(item.dictKey));
      this.MarketTypeSelectPojo = DictionConstUtil.ListToPojo(MarketTypeSelectData);
    } else {
      this.MarketTypeSelectPojo = JSON.parse(JSON.stringify(this.MarketTypePojo));
    }
    if (this.queryForm.multStockType.length) {
      StockTypeSelectData = this.StockTypeSelectData.filter((item) => this.queryForm.multStockType.includes(item.dictKey));
      this.StockTypeSelectPojo = DictionConstUtil.ListToPojo(StockTypeSelectData);
    } else {
      this.StockTypeSelectPojo = JSON.parse(JSON.stringify(this.StockTypePojo));
    }
    this.getStockList(this.pageVO.currentPage);
  }

  // 查询表单下拉框数据处理

  // 重置表单
  private resetForm() {
    (this.$refs.queryStockForm as any).resetFields();
  }

  // 表格列双击事件
  private stockSearchSubmit(row) {
    this.closeDialog();
    this.$emit('getStock', row);
  }

  // 关闭对话框
  private closeDialog() {
    this.$emit('closeDialog');
  }

  // 获取证券代码
  private getStockList(val: number) {
    this.$axios
      .post('/original/stock/list', {
        ...this.queryForm,
        paging: {
          currentPage: val,
          pageSize: 25,
        },
      })
      .then((res: any) => {
        this.stockTable = res.list;
        this.pageVO.total = res.total;
      });
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog .el-dialog__body {
  max-height: 70vh;
}
/deep/ .el-form-item {
  margin-bottom: 5px !important;
}
</style>
